<template>
	<view class="wo-item">
		<view class="wo-item__head">
			<view class="wo-item__marker">{{typealias}}</view>
			<view class="wo-item__info">
				<view class="wo-item__row">
					<text class="wo-item__name">{{workorder.WoType}}</text>
					<view class="wo-item__status wo-item__status--error">
						<text v-if="workOrderState!=4">{{workorder.OrderStatusName}}</text>
						<text v-if="workOrderState==4">{{workorder.FinishedHandleStateName}}</text>
					</view>
				</view>
				<text class="wo-item__num">{{workorder.WoNum}}</text>
			</view>
			<view class="wo-item__headright">
				<navigator :url="'../../pages/wodetail/index?orderDetailId='+workorder.WoId">
					<view class="wo-item__link">
						<text>查看详情</text>
						<image src="../../static/img/icon-arrowright.png" />
					</view>
				</navigator>
				<view class="wo-item__time">{{totalHour}}小时前</view>
			</view>
		</view>
		<view class="wo-item__divider"></view>
		<view class="wo-item__body">

			<view class="wo-item__cellgroup">
				<view class="wo-item__cell">
					<image mode="widthFix" src="../../static/img/icon-user.png" />
					<view>{{workorder.ContactName}}</view>
				</view>
				<view class="wo-item__cell" @click="phoneCall" :data-phone="workorder.ContactMobile" v-if="workorder.ContactMobile">
					<image mode="widthFix" src="../../static/img/icon-phone.png" />
					<view>{{workorder.ContactMobile}}</view>
				</view>
			</view>
			<view class="wo-item__cellgroup">
				<view class="wo-item__cell" v-if="workorder.ContactTelephone">
					<image mode="widthFix" src="../../static/img/icon-phone.png" />
					<view @click="phoneCall" :data-phone="workorder.ContactTelephone">{{workorder.ContactTelephone}}</view>
				</view>
				<view class="wo-item__cell" v-if=" workorder.MobilePhone1">
					<image mode="widthFix" src="../../static/img/icon-phone.png" />
					<view @click="phoneCall" :data-phone="workorder.MobilePhone1">{{workorder.MobilePhone1}}</view>
				</view>
			</view>
			<view class="wo-item__cell" @click="openMap" :data-address="workorder.DisplayAdress">
				<image mode="widthFix" src="../../static/img/icon-location.png" />
				<view>{{workorder.DisplayAdress}}</view>
			</view>
			<view style=" flex-direction: column; float: right;">
				<view class="padding-sm" style="padding: 5px; width: 200rpx;" v-if="ServiceDateTimeFilter(workorder.RequestedServiceDate)">
					<view class="text-center bg-orange" style="padding: 15rpx;">

						<view class="cuIcon-time" style="font-size: 10px;">要求服务日期</view>

						<view style="font-size: 10px;">{{(workorder.RequestedServiceDate||"")|RequestedDisplay}}</view>
					</view>
				</view>
				<view class="padding-sm" style="padding: 5px; width: 200rpx;" v-if="ReservationDateTimeFilter(workorder.AppointmentDateTime)">
					<view class="text-center bg-orange" style="padding: 15rpx;">
						<view class="cuIcon-time" style="font-size: 10px;">预约时间</view>
						<view style="font-size: 10px;">{{(workorder.AppointmentDateTime||"") | appoDateDisplay}}</view>
					</view>
				</view>
			</view>
			<view class="wo-item__cell" v-if="workorder.AssignDate">
				<text>总部派工：</text>
				<view>{{workorder.AssignDate?workorder.AssignDate:""}}</view>
			</view>
			<view class="wo-item__cell" v-if="workOrderState!=4">
				<text>来电内容：</text>
				<view>{{workorder.PhonecallContent?workorder.PhonecallContent:""}}</view>
			</view>
			<view class="wo-item__cell" v-if="workOrderState!=4">
				<text>工单备注：</text>
				<view>{{workorder.WORemark?workorder.WORemark:""}}</view>
			</view>
			<view class="" v-if="(workorder.FinishedHandleState==5&&workOrderState==4)?true:false">
				<text class="text-red text-sm">{{workorder.FinishedHandleStateName}}：</text>
				<text class="text-red text-sm">{{workorder.FinishHandleInfo||""}}</text>
			</view>
		</view>
		<!--  工单类型为安装工单不显示按钮（prodEnv生产版本生效）-->
		<view class="wo-item__footer" v-if="prodEnv == false
		|| (workorder.WoFinishType==1 || workorder.WoFinishType==2 || workorder.WoFinishType==3)">
			<!-- 按钮数量不同 使用不同的btngroup -->
			<view class="wo-item__btngroup" :class="(showBtn.IsShowAcceptorderBtn || showBtn.IsShowVisitBtn 
			  ||showBtn.IsShowCompleteBtn || showBtn.IsShowEvaluateBtn || showBtn.IsShowReCompleteBtn)
			  && showBtn.IsShowReservationBtn? 'wo-item__btngroup--num2': 'wo-item__btngroup--num1'
			  ">
				<button v-if="showBtn.IsShowAcceptorderBtn" class="cu-btn lg primary" @click="onAcceptorderClick">接单</button>
				<button v-else-if="showBtn.IsShowVisitBtn" class="cu-btn lg primary plain" @click="onVisitClick">上门</button>
				<button v-else-if="showBtn.IsShowCompleteBtn" class="cu-btn lg primary" @click="onCompleteClick">完工</button>
				<button v-else-if="showBtn.IsShowEvaluateBtn" class="cu-btn lg primary" @click="onvaluateClick">评价</button>
				<button v-else-if="showBtn.IsShowReCompleteBtn" class="cu-btn lg primary" @click="onReCompleteClick">重新完工</button>

				<button v-if="showBtn.IsShowReservationBtn" class="cu-btn lg primary" @click="onReservationClick">预约</button>
			</view>
			<!-- <view class="wo-item__btngroup wo-item__btngroup--num1">
				<button v-if="showBtn.IsShowVisitBtn" class="cu-btn lg primary plain" @click="onVisitClick">上门</button>
			</view> -->

			<!-- <view v-if="showBtn.showMore" @click="showButton = true;showBtn.showMore=false;" class="wo-item__more">
				<image src="../../static/img/icon-arrowdown.png" />
			</view>
			<template v-if="showButton">
				<view class="wo-item__btngroup wo-item__btngroup--num3">
					<button class="cu-btn lg primary">功能1</button>
					<button class="cu-btn lg primary plain">功能2</button>
					<button class="cu-btn lg primary plain disabled">功能3</button>
				</view>
			</template>
			<view v-if="showButton" @click="showBtn.showMore = true;showButton=false" class="wo-item__more wo-item__more--up">
				<image src="../../static/img/icon-arrowdown.png" />
			</view> -->

		</view>
	</view>
</template>
<script>
	import utils from '@/common/utils.js'
	import constant from '@/common/constant.js'
	export default {
		props: {
			workorder: {
				type: Object,
				default () {
					return {}
				}
			},
			typealias: {
				type: String,
				default () {
					return ""
				}
			},
			showBtnObject: {
				type: Object
			},
			workOrderState: {
				type: Number,
				default () {
					return 0
				}
			}
		},
		data() {
			return {
				showMore: false,
				showButton: false,

			}
		},
		filters: {
			appoDateDisplay(value) {
				if (value) {
					value = value.replace(/-/g, "/");
					let appdate = new Date(value);
					return `${utils.getDayName(value)} ${utils.formatDate(appdate,"hh:mm")}`
				}
				return ''
			},
			RequestedDisplay(value) {
				if (value) {
					value = value.replace(/-/g, "/");
					let appdate = new Date(value);
					return `${utils.getDayName(value)} ${utils.formatDate(appdate,"hh:mm")}`
				}
				return ''
			}
		},
		mounted() {},
		computed: {
			totalHour: function() {
				let beHours = 0;
				if (this.workorder.AssignDate && this.workorder.AssignDate != "null") {
					let dateTemp = new Date(this.workorder.AssignDate.replace(/\-/g, '\/'));
					let totalSecs = (new Date() - dateTemp) / 1000;
					beHours = Math.floor(totalSecs / 3600);
				}
				return beHours;
			},
			showBtn: function() {
				return this.showBtnObject;
			},
			prodEnv() {
				return this.$ENV.prodEnv
			}
		},
		methods: {
			ServiceDateTimeFilter(value) {
				if (value) {
					let now = new Date();
					let appoDate = new Date(value.replace(/-/g, "/"))
					if (appoDate.getTime() >= now.getTime() &&
						(this.workorder.OrderStatus == constant.WORDER_rework ||
							this.workorder.OrderStatus == constant.WORDER_START_receivedorders ||
							this.workorder.OrderStatus == constant.WORDER_START_dispatchedworker)) {
						return true;
					}
				}
				return false;
			},
			ReservationDateTimeFilter(value) {
				if (value) {
					let now = new Date();
					let appoDate = new Date(value.replace(/-/g, "/"))
					if (appoDate.getTime() >= now.getTime() &&
						(this.workorder.OrderStatus == constant.WORDER_rework ||
							this.workorder.OrderStatus == constant.WORDER_START_receivedorders)) {
						return true;
					}
				}
				return false;
			},
			phoneCall(e) {
				let phone = e.currentTarget.dataset.phone;
				uni.makePhoneCall({
					phoneNumber: phone
				})
			},
			openMap(e) {
				let adddress = e.currentTarget.dataset.address;
				let eventParam = {
					adddress: adddress
				}

				this.$emit("onOpenMap", eventParam)
			},
			onAcceptorderClick(e) {

				let eventParam = {
					WoId: this.workorder.WoId
				}

				this.$emit("onAcceptorderClick", eventParam)
			},
			onReservationClick(e) {
				// let eventParam = {
				// 	WoId: this.woid,
				// 	ContactName: this.contactname,
				// 	ContactMobile: this.contactmobile,
				// 	DisplayAddress: this.displayadress
				// }
				//debugger;
				this.$emit("onReservationClick", this.$props)
			},
			onVisitClick(e) {
				// let eventParam = {
				// 	WoId: this.woid,
				// 	ContactName: this.contactname,
				// 	ContactMobile: this.contactmobile,
				// 	DisplayAddress: this.displayadress,
				// 	Street: this.street
				// }
				//debugger;

				this.$emit("onVisitClick", this.$props)
			},
			onCompleteClick(e) {
				//debugger
				this.$emit("completeWOrder", this.$props)
			},
			onvaluateClick(e) {
				this.$emit("valuateClick", this.$props)
				console.log("评价");
			},
			onCheckClick(e) {
				console.log("查看");
			},
			onReCompleteClick(e) {
				this.$emit("reCompleteWOrder", this.$props);
				console.log("重新完工")
			}
		}
	}
</script>
<style lang="scss">
	@import './index.scss';
</style>
